<template>
  <div id="index">
    <el-container>
      <el-aside width="256px">
        <el-menu
          :default-active="this.$route.path"
          class="el-menu-vertical-demo navs"
          @open="handleOpen"
          @close="handleClose"
          :collapse="isCollapse"
          background-color="#001529"
          text-color="hsla(0,0%,100%,.65)"
          active-text-color="white"
          :style="!isCollapse ? 'text-align: inherit;' : 'text-align: center;'"
          router
        >
          <el-menu-item class="logo">
            <h3 v-if="!isCollapse">天长协同治理系统</h3>
          </el-menu-item>
          <!-- <el-menu-item index="/home">
            <i class="iconfont icon-pingtaiiconhuizong_huaban1fuben17"></i>
            <span slot="title">首页</span>
          </el-menu-item> -->
          <!-- <el-menu-item index="/myTask">
            <i class="el-icon-s-operation"></i>
            <span slot="title">我的任务</span>
          </el-menu-item>
          <el-menu-item index="/release">
            <i class="el-icon-edit-outline"></i>
            <span slot="title">我的发布</span>
          </el-menu-item>
          <el-menu-item index="/create">
            <i class="el-icon-folder-add"></i>
            <span slot="title">创建任务</span>
          </el-menu-item>
          <el-menu-item index="">
            
          </el-menu-item> -->
          <el-menu-item index="/add_task">
            <i class="el-icon-folder-add"></i>
            <span slot="title">创建呼叫</span>
          </el-menu-item>
          <el-menu-item index="/my_task">
            <i class="el-icon-edit-outline"></i>
            <span slot="title">呼叫列表</span>
          </el-menu-item>
          <el-menu-item index="/home">
            <i class="el-icon-s-operation"></i>
            <span slot="title">接收列表</span>
          </el-menu-item>
          <el-menu-item index="/jiandu?title=协调监督">
            <i class="el-icon-s-operation"></i>
            <span slot="title">协调监督</span>
          </el-menu-item>
          <!-- <el-menu-item index="/subordinate">
            <i class="el-icon-finished"></i>
            <span slot="title">{{data.member == 0 ? '发布列表' : '下级任务列表'}}</span>
          </el-menu-item> -->
          <!--          <el-menu-item index="/statistics">
            <i class="el-icon-s-data"></i>
            <span slot="title">数据统计</span>
          </el-menu-item> -->
          <!-- <el-menu-item index="/feedlist">
            <i class="el-icon-edit-outline"></i>
            <span slot="title">反馈列表</span>
          </el-menu-item> -->
          <!-- <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-edit-outline"></i>
              <span>呼叫反馈</span>
            </template>
              <el-menu-item index="/feedlist">反馈列表</el-menu-item>
              <el-menu-item index="/feedback">新增反馈</el-menu-item>
          </el-submenu> -->

          <el-submenu index="2" v-if="data.member != 0">
            <template slot="title">
              <i class="el-icon-tickets"></i>
              <span>制度体系</span>
            </template>
            <!-- <el-menu-item index="/news_list" v-for="(item,i) in options" :key="i">{{item.name}}</el-menu-item> -->
            <div v-for="(item, index) in options" :key="index">
              <el-menu-item
                :index="'/news_list?id=' + item.id"
                :class="{
                  activeTwo: item.level == 1,
                  activethree: item.level == 2,
                }"
                v-if="data.userid == 10000 ? true : item.id != 49"
                >{{ item.name }}</el-menu-item
              >
              <!-- <el-menu-item :index="'/news_list?id='+item1.id" v-for="(item1,index1) in item.childer" :key="index1" style="margin-left:20px;">
                    {{item1.name}}
                  </el-menu-item> -->
            </div>
          </el-submenu>

          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-user"></i>
              <span>管理中心</span>
            </template>
            <el-menu-item index="/user" v-if="data.member != 0">账号列表</el-menu-item>
            <el-menu-item index="/configure" v-if="data.member != 0">网站配置</el-menu-item>
            <el-menu-item index="/person">个人信息</el-menu-item>
            <!-- <el-menu-item index="/add_news" v-if="data.member == 2">添加信息</el-menu-item> -->
            <el-menu-item index="/station" v-if="data.member != 0">站点信息</el-menu-item>
            <el-menu-item index="/bannerpic" v-if="data.member != 0">轮播管理</el-menu-item>
            <el-menu-item index="/statistics" v-if="data.userid == 10000">数据统计</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container style="min-width: 1050px">
        <el-header>
          <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
            <button v-if="isCollapse">
              <i class="el-icon-s-fold" @click="isCollapse = false"></i>
            </button>
            <button v-if="!isCollapse">
              <i class="el-icon-s-unfold" @click="isCollapse = true"></i>
            </button>
          </el-radio-group>
          <div class="user">
            <el-avatar :src="data.icon == '' ? 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png' : data.icon"></el-avatar>
            <p>{{ data.realname }}</p>
            <div class="login">
              <div class="back" @click="sign_out">
                <i class="iconfont icon-guanbi"></i>
                <span>退出登录</span>
              </div>
            </div>
          </div>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
        <el-footer>
          <dl-footer></dl-footer>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { sign_out, userInfo, allocation, optionsList } from '@/utils/index.js'
import dlFooter from '@/components/footer'
export default {
  data() {
    return {
      isCollapse: false,
      userLogin: false,
      data: [],
      options: [],
    }
  },
  components: {
    dlFooter,
  },
  beforeCreate() {
    userInfo().then((res) => {
      if (res.code != '0') {
        this.$message.closeAll()
        this.$message.warning(res.msg)
        this.$router.push('/')
      } else {
        this.data = res.data
        console.log(res.data)
        this.$store.state.userInfo = res.data
      }
    }),
      // 网站配置
      allocation().then((res) => {
        console.log(res)
      })
  },
  created() {
    optionsList({ type: 'list' }).then((res) => {
      console.log(res)
      this.options = res.data
      // res.data.forEach((item)=>{
      //     this.options.push(item)
      //     if(item.child != undefined){
      //         item.child.forEach((item1)=>{
      //             this.options.push(item1)
      //         })
      //     }
      // })
      console.log(this.options)
    })
  },
  mounted() {},
  methods: {
    handleOpen() {
      console.log('A')
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },
    // 退出
    sign_out() {
      sign_out().then((res) => {
        if (res.code == '0') {
          this.$message.closeAll()
          this.$message.success(res.msg)
          setTimeout(() => {
            this.$router.push('/')
          }, 700)
        } else {
          this.$message.closeAll()
          this.$message.warning(res.msg)
          setTimeout(() => {
            this.$router.push('/')
          }, 700)
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.el-radio-group button {
  border: 0;
  background: transparent;
  color: white;
  vertical-align: middle;
  margin-top: 15px;
}
.el-radio-group button i {
  font-size: 25px;
  color: #333;
}
.el-radio-group button:hover {
  cursor: pointer;
}
.el-header {
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-footer {
  background: #e9eef3;
  // line-height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.el-footer p {
  text-align: center;
  line-height: 60px;
}
.el-container {
  height: 100vh;
}
.el-aside {
  width: auto !important;
  background: #001529;
}
.logo::v-deep {
  padding: 0 !important;
  margin: 10px 0;
  margin-left: 20px;
}
.logo img {
  vertical-align: middle;
  margin-left: 20px;
}
.logo h3 {
  display: inline-block;
  font-size: 20px;
  color: white;
  vertical-align: middle;
  padding-left: 10px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  padding: 10px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 256px;
  min-height: 400px;
}
.el-menu-item span{
  font-size: 20px !important;
}
.navs::v-deep {
  border: 0 !important;
  .el-submenu__title span {
    color: white;
    font-size: 20px !important;
  }
  .el-submenu__title span:hover {
    color: white;
  }
  i {
    font-size: 24px;
    color: white;
    margin-right: 10px;
  }
  .el-menu-item {
    font-size: 20px !important;
  }
}
.el-menu-item{
  height: 65px !important;
}
.el-tooltip__popper::v-deep {
  font-size: 16px;
}
.user {
  display: inline-block;
  float: right;
  position: relative;
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 10px;
}
.user:hover {
  cursor: pointer;
  background: #f9f9f9;
}
.user:hover .login {
  visibility: visible;
  opacity: 1;
}
.user span {
  vertical-align: middle;
  display: inline-block;
  width: 25px;
  height: 25px;
}
.user span img {
  width: 100%;
  height: 100%;
}
.user p {
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  padding-left: 7px;
}
.login {
  position: absolute;
  width: 160px;
  height: 40px;
  top: 60px;
  right: 10px;
  background: white;
  visibility: hidden;
  opacity: 0;
  transition: all 1s;
  z-index: 999;
}
.login .back {
  padding: 5px 0;
}
.login .back:hover {
  background: #f6fcff;
  cursor: pointer;
}
.login i {
  vertical-align: middle;
  transform: rotate(90deg);
  line-height: 30px;
  vertical-align: middle;
  padding-left: 10px;
}
.login span {
  width: auto;
  height: auto;
  display: inline-block;
  color: #333;
  font-size: 14px;
  padding-left: 10px;
  vertical-align: middle;
  line-height: 30px;
}
.btnlogin::v-deep {
  button {
    padding: 6px 20px;
  }
}
.activeTwo {
  margin-left: 30px;
}
.activethree {
  margin-left: 50px;
}
</style>
